<template>
  <div class="carWra">
    <!-- 头部标题 组件 -->
    <headerTitle>{{ msg }}</headerTitle>
    <div class="collectArea" v-if="this.newGood == ''">
      <div class="listsCont"></div>
      <div class="listNull">
        <div class="tip">您还没有购买任何商品</div>
        <div class="btn">
          <button @click="$router.push({ path: '/home' })">逛一逛</button>
          <button>我的收藏</button>
        </div>
      </div>
    </div>

    <div class="collect_box" v-else>
      <div class="tip" v-show="showtip">
        <span>当当自营订单满49包邮，已免运费6元</span>
        <img
          src="http://cart.m.dangdang.com/images/info_close.png"
          alt=""
          @click="showtip = false"
        />
      </div>
      <div class="title" v-show="colect">
        <van-checkbox
          v-model="checked"
          icon-size="24px"
          checked-color="#FF4650"
        ></van-checkbox>
        <img src="http://cart.m.dangdang.com/images/dangdang.png" alt="" />
        <span>当当网</span>
        <div
          class="edit"
          @click="(editAll = true), (editshow = true)"
          v-show="editAll == false"
        >
          编辑
        </div>
        <div
          class="edit"
          v-show="editAll"
          @click="(editAll = false), (editshow = false)"
        >
          完成
        </div>
      </div>
      <ul class="goods_box">
        <van-checkbox-group v-model="result" ref="checkboxGroup">
          <li v-for="(item, index) in newGood" :key="index">
            <!-- <div class="left_check" v-show="editshow == false">
              <van-checkbox
                :name="index"
                icon-size="24px"
                checked-color="#FF4650"
              ></van-checkbox>
            </div> -->
            <div class="center_img">
              <img :src="item.image_url" alt="" />
            </div>
            <div class="right_cont" v-show="editshow == false">
              <p class="name">{{ item.name }}</p>
              <div class="price">
                <span class="currentPrice"> ￥{{ item.price }} </span>
                <span class="oldPrice"> ￥{{ item.original_price }}</span>
              </div>
              <div class="tap">
                <span>限时抢</span>
              </div>
              <p class="num">x{{ item.num }}</p>
              <div class="img">
                <img
                  src="http://cart.m.dangdang.com/images/edit.png"
                  @click="editshow = true"
                />
              </div>
            </div>
            <div class="right_cont" v-show="editshow == true">
              <van-stepper
                v-model="item.num"
                input-width="40px"
                button-size="50px"
                @plus="addFun(index)"
                @minus="subFun(index)"
              />
              <span
                class="iconfont icon-shanchu"
                v-show="editshow == true && editAll == false"
                @click="delFun(item.id, index)"
              ></span>
            </div>
            <div class="ctrol" v-show="editshow == true">
              <div
                class="complect"
                @click="complect()"
                v-show="editshow == true && editAll == false"
              >
                完成
              </div>
              <div
                class="delect"
                v-show="editAll == true"
                @click="delFun(item.id, index)"
              >
                删除
              </div>
            </div>
          </li>
        </van-checkbox-group>
      </ul>
    </div>

    <div class="toggle" v-show="colect != ''">
      <div class="left">
        <van-checkbox
          v-model="checked"
          icon-size="24px"
          checked-color="#FF4650"
          @click="toggleAll"
          >全选</van-checkbox
        >
        <div class="sum">
          合计 <span>￥{{ toggleFun.toFixed(2) }}</span>
        </div>
      </div>
      <div class="right">
        <div class="jiesuan" @click="goOrdrer">结算( {{ toggleNum }} )</div>
      </div>
    </div>

    <!-- 猜你喜欢组件 -->
    <guessLike />
  </div>
</template>

<script>
import { Toast } from "vant";
import guessLike from "../components/base/guessLike.vue";
import headerTitle from "../components/base/headerTitle.vue";
export default {
  props: ["colect"],
  components: {
    guessLike,
    headerTitle,
  },
  data() {
    return {
      msg: "购物车",
      goodslist: [],
      goodsDetail: [],
      ifhave: false,
      showtip: true,
      editshow: false,
      editAll: false,
      delshow: false,
      checked: true,
      result: [],
      value: 1,
      newGood: [],
      price: 0,
      Toast,
    };
  },
  created() {
    this.goodslist = require("../../public/jSON/car");
    this.goodsDetail = require("../../public/jSON/good");
    // console.log(this.colect);
    // console.log(this.goodslist);
    this.goodslistFun();
    this.changePriceFun();
  },
  mounted() {
    window.addEventListener("beforeunload", window.scroll(0, 0));
  },
  methods: {
    goOrdrer() {
      // this.$toast("正在结算...");
      Toast.loading({
        message: "正在结算中...",
        forbidClick: true,
      })
      this.$router.push({path:'/orderForm'})
    },
    //总计 price
    changePriceFun() {
      this.price = this.newGood.reduce(function (preValue, item) {
        return preValue + item.price * item.num;
      }, 0);
    },
    //完成按钮
    complect() {
      console.log(111);
      this.goodslistFun();
      this.editshow = false;
      this.changePriceFun();
    },
    // 数量减少
    subFun(index) {
      this.newGood[index].num -= 1;
      console.log(index, this.newGood[index].num);
      this.$emit("change-sub", index);
    },
    // 数量添加
    addFun(index) {
      this.$emit("change-index", index);
      this.newGood[index].num += 1;
      console.log(index);
      console.log(this.newGood[index].num);
      // console.log(this.newGood);
    },
    // 删除商品
    delFun(id, index) {
      this.$emit("collect", id);
      this.newGood.splice(index, 1);
      console.log(this.newGood);
      this.goodslistFun();
    },
    // 通过id获取购物车的商品
    goodslistFun() {
      let newArr = [];
      for (let i = 0; i < this.colect.length; i++) {
        for (let j = 0; j < this.goodsDetail.length; j++) {
          if (this.colect[i].id == this.goodsDetail[j].id) {
            this.goodsDetail[j].num = this.colect[i].num;
            newArr.push(this.goodsDetail[j]);
            // newArr[i].num = this.colect[j].num
          }
        }
      }
      console.log(newArr);
      this.newGood = newArr;
    },
    toggleAll() {
      // if (this.$refs.checkboxGroup.toggleAll(true)) {
      //   this.$refs.checkboxGroup.toggleAll(false);
      // } else {
      //   this.$refs.checkboxGroup.toggleAll(true);
      // }
      console.log(111);
    },
  },
  computed: {
    toggleFun() {
      // let price = 0;
      // for (let i = 0; i < this.newGood.length; i++) {
      //     price +=  this.newGood[i].price * this.newGood.num
      // }
      // console.log(price);
      // return this.price = price
      return this.newGood.reduce(function (preValue, item) {
        return preValue + item.price * item.num;
      }, 0);
    },
    toggleNum() {
      return this.newGood.reduce(function (preValue, item) {
        return preValue + item.num;
      }, 0);
    },
  },
  watch: {
    checked: function () {},
  },
};
</script>

<style lang="less" >
.toggle {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55px;
  border-top: 1px solid rgba(136, 136, 136, 0.3);
  border-bottom: 1px solid rgba(136, 136, 136, 0.3);
  .left {
    display: flex;
    flex: 1;
    padding: 0 0 0 10px;
    box-sizing: border-box;
    justify-content: space-between;
    .sum {
      margin-right: 5px;
      span {
        color: red;
      }
    }
  }
  .right {
    flex: 0 0 25%;
    height: 100%;
    line-height: 55px;
    background-color: red;
    color: white;
    text-align: center;
  }
}
.carWra {
  background-color: #f2f2f2;
}
.car_title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0px 15px;
}
.collectArea {
  width: 100%;
  height: 290px;
  color: #939393;
  border: 1px solid transparent;
  box-sizing: border-box;
  background: url(../assets/images/myBG.gif) center 50px no-repeat;
  background-size: 160px;
  .listNull {
    height: 100%;
    padding-top: 200px;
    .tip {
      border: 1px solid transparent;
      text-align: center;
      font-size: 13px;
      margin-bottom: 5px;
    }
    .btn {
      display: flex;
      justify-content: center;
      button {
        outline: none;
        border: 0.5px solid #777;
        border-radius: 5px;
        color: #939393;
        width: 126px;
        height: 40px;
        font-size: 17px;
        margin: 0px 10px;
      }
    }
  }
}
.collect_box {
  .tip {
    height: 40px;
    font-size: 14px;
    color: white;
    padding: 0px 10px;
    box-sizing: border-box;
    background-color: #ffa5a5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    img {
      width: 15px;
    }
  }
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0px 10px;
    box-sizing: border-box;
    background-color: white;
    border-top: 1px solid rgba(136, 136, 136, 0.3);
    border-bottom: 1px solid rgba(136, 136, 136, 0.3);
    color: #787878;
    .edit {
      position: absolute;
      right: 10px;
    }
    img {
      width: 20px;
      height: 20px;
      margin: 10px;
    }
  }
  .goods_box {
    border-top: 1px solid rgba(180, 178, 178, 0.3);
    li {
      padding: 20px 10px;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 1px;
      background-color: white;

      .left_check {
        .van-checkbox__icon {
          margin-top: 40px;
        }
      }
      .center_img {
        flex: 0 0 30%;
        margin: 0px 5px;
        img {
          width: 100%;
        }
      }
      .right_cont {
        flex: 1;
        position: relative;
        .img {
          position: absolute;
          right: 20px;
          bottom: 20px;
          img {
            width: 20px;
          }
        }
        .name {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .price {
          margin: 2px 0;
          font-size: 15px;
          .currentPrice {
            color: #ff2832;
            margin-right: 5px;
          }
          .oldPrice {
            text-decoration: line-through;
            color: #b8b8b8;
          }
        }
        .icon-shanchu {
          position: absolute;
          right: 30px;
          bottom: 0px;
          font-size: 20px;
          color: #b8b8b8;
        }
        .van-stepper {
          margin: 0px 10px;
        }
      }
      .ctrol {
        flex: 0 0 15%;
        div {
          height: 100%;
          background-color: #f0f0f0;
          color: #646464;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .delect {
          color: white;
          background-color: #ff4560;
        }
      }
      .tap {
        span {
          font-size: 12px;
          color: white;
          display: inline-block;
          padding: 2px 5px;
          background-color: #ff5753;
        }
      }
      .num {
        font-size: 14px;
        color: #646464;
        margin: 8px 0px 0 0;
      }
    }
  }
}
</style>